<!-- 
  @name: 加注站
  @date: 2020.3.3
 -->
<template>
	<view class="content">
		<view class="fixed_top">
			<!-- 搜索区域 -->
			<view class="search">
				<view class="doview">
					<view class="i"></view>
					<input class="int" placeholder="输入加注站名称" placeholder-class="phcolor"  v-model.trim="keyword"/>
					<view class="btn1" @tap="search">搜索</view>
				</view>
				<view class="btn2" @tap="$navigateTo('./siteEdit')">添加</view>
			</view>
			
			<!-- 筛选区域 -->
			<view class="select">
				<!-- 加注机状态筛选 -->
				<view class="u-f-ac" @tap="showStatus()">
					<view >
						<text v-show="siteStatus === -1">加注机状态</text>
						<text class="stext" v-show="siteStatus === 2">加注机开启</text>
						<text class="stext" v-show="siteStatus === 3">加注机停用</text>
						<text class="stext" v-show="siteStatus === 4">加注机离线</text>
					</view>
					<view class="_triangle atop" v-show="status"></view>
					<view class="_triangle abtm" v-show="!status"></view>
				</view>
				<!-- 余量筛选 -->
				<view class="resi" :class="resi ? 'std' : ''" @tap="showResi()">余量</view>
				<view class="up_down_arr" :class="resi ? 'std' : ''"></view>
				<!-- 地图展示 -->
				<text style="flex: 1;"></text>
				<view class="img" @tap="$navigateTo('./indexMap')"></view>
			</view>
		</view>
		
		<!-- 筛选-状态 -->
		<view class="_popup"  v-if="status" @tap="status = false"></view>
		<view class="status" :class="{show:status}">
			<view
				class="btn"
				v-for="(item, index) in statusList"
				:key="index"
				:class="siteStatus === item.code ? 'sl' : ''"
				@tap="changeStatus(item, index)">
				<view :class="index === 1 ? 'dian sd' : item.icon" v-show="index > 0"></view>
				<text>{{item.text}}</text>
			</view>
		</view>
		
		<!-- 列表区域-非余量查询 -->
		<view class="listview" v-if="!resi">
			<view class="list-card" v-for="(item, index) in lists" :key="item.siteId">
				<view class="top">
					<view class="img">
						<image class="i" :src="item.siteLogo ? item.siteLogo : imgUser"></image>
					</view>
					<text class="name text_over" @tap="$navigateTo('./siteDet?siteId=' + item.siteId)">{{item.siteName}}</text>
					<view class="add" @tap="$navigateTo('./macEdit?siteId=' + item.siteId)"></view>
				</view>
				<view class="mac-list" v-for="(it, ix) in item.lstFillMachine" :key="it.machineId">
					<view class="left">
						<view class="pie">
							<view class="pie-cir">{{it.capacityRatio2}}</view>
							<view class="pie-left">
								<view class="pie-left-deg" :style="'transform: rotate(' + it.leftAngle + 'deg);'"></view>
							</view>
							<view class="pie-right">
								<view class="pie-right-deg" :style="'transform: rotate(' + it.rightAngle + 'deg);'"></view>
							</view>
						</view>
					</view>
					<view class="info" @tap="$navigateTo('./macDet?macCode=' + it.macCode)">
						<view class="ic" v-if="it.siteStatus==2" :class="it.macStatus === 2 ? 'sl' : 'stop'"></view>
						<view v-if="it.siteStatus===3" class="stop"></view>
						<view v-if="it.siteStatus===4" class="offline"></view>
						<view class="text text_over">{{it.macName}}</view>
						<view class="arrow_nav"></view>
					</view>
				</view>
				<view class="bottom" v-if="item.lstFillMachine2.length > 3 && item.lstFillMachine.length > 1">
					<view class="more" v-if="item.showmore === 1" @tap="showMore(item, index, 1)">
						<text>展开更多</text>
						<view class="arr down"></view>
					</view>
					<view class="more" v-if="item.showmore === 2" @tap="showMore(item, index, 2)">
						<text>收起更多</text>
						<view class="arr up"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 列表区域-余量查询 -->
		<view class="listview-2" v-if="resi">
			<view class="list-card-2">
				<view class="mac-list" v-for="(it, ix) in lists2" :key="it.machineId">
					<view class="left">
						<view class="pie">
							<view class="pie-cir">{{it.capacityRatio2}}</view>
							<view class="pie-left">
								<view class="pie-left-deg" :style="'transform: rotate(' + it.leftAngle + 'deg);'"></view>
							</view>
							<view class="pie-right">
								<view class="pie-right-deg" :style="'transform: rotate(' + it.rightAngle + 'deg);'"></view>
							</view>
						</view>
					</view>
					<view class="info" @tap="$navigateTo('./macDet?macCode=' + it.macCode)">
						<view class="ic" v-if="it.siteStatus===2" :class="it.macStatus === 2 ? 'sl' : 'stop'"></view>
						<view v-if="it.siteStatus===3" class="stop"></view>
						<view v-if="it.siteStatus===4" class="offline"></view>
						<view class="text text_over">{{it.macName}}</view>
						<view class="arrow_nav"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部加载提示 -->
		<!-- <btm-load></btm-load> -->
		<view style="height: 100rpx;"></view>
		
		<!-- 显示于tabbar之上，渲染阴影效果 -->
		<view class="tabbar_shadow"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',  //搜索关键字
				status: false,  //是否在选择开启状态，若是的话，则显示状态下拉菜单
				siteStatus: -1,  //加注机状态，-1-全部，2-开启，3-停用 4-离线
				statusList: [
					{code: -1, text: '全部'}, 
					{code: 2, text: '开启'}, 
					{code: 3, text: '停用',icon:'stop'},
					{code: 4, text: '离线',icon:'offline'},
				],
				resi: false,  //是否根据余量从小到大排列
				page: 1,  //页码
				lists: [],  //列表-非余量
				lists2: [],  //列表-余量
				userMain: -1,  //账号权限，0-子账号，1-主账号，2-加注站职员
				imgUser: this.$tmp.IMG_USER,  //默认头像
				listscopy:'',
				allSiteList:[]
			}
		},
		onLoad() {
			// 所有加注站数组
			this.allSiteList = [];
			if(this.$store.state.userinfo) {
				this.getList();
			}
			uni.$on('site_addMac', this.addMac);
			uni.$on('site_addSite', this.search);
			uni.$on('site_editMac', this.editMac);
			uni.$on('site_deleteMac', this.deleteMac);
			uni.$on('site_deleteSite', this.deleteSite);
			uni.$on('refreshSite', this.pullDown);
		},
		onShow() {
			this.userMain = this.$store.state.userMain;
		},
		onUnload() {
			uni.$off('site_addMac', this.addMac);
			uni.$off('site_addSite', this.search);
			uni.$off('site_editMac', this.editMac);
			uni.$off('site_deleteMac', this.deleteMac);
			uni.$off('site_deleteSite', this.deleteSite);
			uni.$off('refreshSite');
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			if(!this.resi) {
				// this.getList();
			} else {
				this.getList2();
			}
		},
		onPullDownRefresh() {
			this.pullDown();
		},
		methods: {
			//下拉刷新
			pullDown() {
				if(!this.resi) {
					this.keyword = '';
					this.search();
					this.siteStatus = -1;
				} else {
					this.page = 1;
					this.lists2 = [];
					this.getList2();
				}
			},
			//监听是否编辑过加注机详情
			editMac(e) {
				let index1 = this.lists.findIndex(item => item.siteId == e.siteId);
				if(this.lists[index1].lstFillMachine) {
					let index2 = this.lists[index1].lstFillMachine.findIndex(item => item.machineId == e.machineId);
					this.lists[index1].lstFillMachine[index2].macStatus = e.macStatus;
					this.lists[index1].lstFillMachine[index2].macName = e.macName;
					if(this.lists[index1].lstFillMachine2) {
						let index3 = this.lists[index1].lstFillMachine2.findIndex(item => item.machineId == e.machineId);
						this.lists[index1].lstFillMachine2[index3].macStatus = e.macStatus;
						this.lists[index1].lstFillMachine2[index3].macName = e.macName;
					}
				}
			},
			//监听添加加注机
			addMac(info) {
				let index = this.lists.findIndex(item => item.siteId == info.siteId);
				if(this.lists[index].lstFillMachine) {
					let arr = [];
					arr.push(info);
					let lstFillMachine = JSON.parse(JSON.stringify(this.lists[index].lstFillMachine));
					this.lists[index].lstFillMachine = arr.concat(lstFillMachine);
				} else {
					this.lists[index].lstFillMachine = [];
					this.lists[index].lstFillMachine.push(info);
				}
			},
			//监听解绑加注机
			deleteMac(e) {
				if(!this.resi) {
					//非余量查询列表下
					let index1 = this.lists.findIndex(item => item.siteId == e.siteId);
					if(this.lists[index1].lstFillMachine) {
						let index2 = this.lists[index1].lstFillMachine.findIndex(item => item.machineId == e.machineId);
						this.lists[index1].lstFillMachine.splice(index2, 1);
						if(this.lists[index1].lstFillMachine2) {
							let index3 = this.lists[index1].lstFillMachine2.findIndex(item => item.machineId == e.machineId);
							this.lists[index1].lstFillMachine2.splice(index3, 1);
						}
					}
				} else {
					//余量查询列表下
					let index9 = this.lists2.findIndex(item => item.machineId == e.machineId);
					this.lists2.splice(index9, 1);
				}
			},
			//监听删除加注站
			deleteSite(e) {
				let index = this.lists.findIndex(item => item.siteId == e.siteId);
				this.lists.splice(index, 1);
			},
			//搜索加注站(非余量查询)
			search() {
				this.status = false;
				this.resi = false;
				this.lists = [];
				this.page = 1;
				this.getList();
			},
			//显示加注机状态筛选
			showStatus() {
				this.status = !this.status;
			},
			//更改加注机状态筛选
			changeStatus(item, index) {
				this.siteStatus = item.code;
				this.status = false;
				this.resi = false;
				this.lists = JSON.parse(JSON.stringify(this.listscopy));
			
				//状态筛选
				this.lists.forEach((item) => {
					
					if(item.lstFillMachine && item.lstFillMachine.length) {
						if(this.siteStatus != -1 ){
							item.lstFillMachine = item.lstFillMachine.filter(it => {

								if(this.siteStatus==3) { // 停用
									return	it.siteStatus == this.siteStatus || it.macStatus==3;
								} else if(this.siteStatus==2) { // 开启
									return it.siteStatus == this.siteStatus && it.macStatus==2;
								} else { // 离线
									return it.siteStatus == this.siteStatus;
								}
								 
							});
						}
						
					}
				})
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			//点击展开/收起更多
			showMore(item, index, code) {
				let data = item;
				if(code === 1) {
					//展开更多
					data.showmore = 2;
					data.lstFillMachine = JSON.parse(JSON.stringify(data.lstFillMachine2));
				} else {
					//收起更多
					data.showmore = 1;
					data.lstFillMachine.splice(3);
				}
				this.lists[index] = data;
			},
			//根据余量进行筛选
			showResi() {
				let resid = this.resi;
				this.resi = !resid;
				this.status = false;
				this.siteStatus = -1;
				this.keyword = '';
				this.page = 1;
				if(resid) {
					//从余量筛选转为非余量筛选
					this.lists = [];
					this.getList();
				} else {
					//从非余量筛选转为余量筛选
					this.lists2 = [];
					this.getList2();
				}
			},
			//对加注机数组进行操作
			dealMac(res,macStatusMap) {
				
				let arr = JSON.parse(JSON.stringify(res));
				arr.forEach(it => {
					if(res && macStatusMap) {
						// 加注机状态整合
						
						let statusMap = {
							ONLINE:2,  // 正常
							DISABLE:3, // 停用
							OFFLINE:4, // 离线
						};
						let STATUS = macStatusMap[it.deviceName];
						if(STATUS) {
							it.siteStatus = statusMap[STATUS];
						} else {
							it.siteStatus = 2;
						}
						statusMap = null;
					}
					if(it.currentCapacity && it.totalCapacity) {
						it.capacityRatio = (it.currentCapacity/it.totalCapacity).toFixed(2);
					}
					// 流量样式显示
					if(it.capacityRatio && it.capacityRatio > 0) {
						if(it.capacityRatio <= 0.5) {
							it.leftAngle = 180 - 360 * it.capacityRatio;
							it.rightAngle = 180;
						} else {
							it.leftAngle = 0;
							it.rightAngle = 360 * (1 - it.capacityRatio);
						}
						it.capacityRatio2 = this.$toPercent(it.capacityRatio, 0);
					} else {
						it.leftAngle = 180;
						it.rightAngle = 180;
						it.capacityRatio = 0;
						it.capacityRatio2 = '0%';
					}
				});
				if(Array.isArray(this.allSiteList) && this.allSiteList.length) {
					this.allSiteList = [...this.allSiteList,...arr];
				}
				return arr;
			},
			//获取列表-余量查询
			getList2() {
				let arr = this.listscopy.reduce((a,b)=> {
					if(Array.isArray(b.lstFillMachine) && b.lstFillMachine.length) {
						a = a.concat(b.lstFillMachine);
					}
					return a;
				},[]);
				arr.sort((a,b) => parseFloat(b.capacityRatio) - parseFloat(a.capacityRatio));
				this.lists2 = [...arr];
				return 
				// 下面的接口弃用
				this.$http({
					url: this.$api.siteUrl + 'getfillmachinepagebyoperator',
					data: {
						action: 1,
						page: this.page,
						rows: this.$tmp.ROWS_RET
					},
					loading: this.page > 1 ? 0 : ''
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0) {
						arr = this.dealMac(arr);
						this.lists2 = this.lists2.concat(arr);
						this.page += 1;
					}
				});
			},
			//获取列表-非余量查询
			async getList() {
				// 修改内容
				this.macStatusMap = await this.getalldevicestatus();
				this.$http({
					url: this.$api.siteUrl + 'getfillsitepage',
					data: {
						keyword: this.keyword,
						siteStatus: this.siteStatus < 0 ? '' : this.siteStatus,
						page: this.page,
						rows: 2000
					},
					loading: this.page > 1 ? 0 : ''
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0) {
						arr.forEach(item => {
							if(item.lstFillMachine && item.lstFillMachine.length > 0) {
								item.lstFillMachine = this.dealMac(item.lstFillMachine,this.macStatusMap);
								if(item.lstFillMachine.length > 3) {
									item.lstFillMachine2 = JSON.parse(JSON.stringify(item.lstFillMachine));
									item.lstFillMachine.splice(3);
									item.showmore = 1;
								}
							}
						});
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
					this.listscopy = JSON.parse(JSON.stringify(this.lists));
				});
			},
			// 获取所有设备的状态
			async getalldevicestatus() {
				let rt = await this.$http({url:this.$api.siteUrl + 'getalldevicestatus'});
				let tempObj = {};
				Array.isArray(rt) && rt.forEach(item => {
					tempObj[item.deviceName] = item.status;
				})
				return tempObj;
			}
		}
	}
</script>

<style lang="scss">
	.u-f-ac {
		display: flex;
		align-items: center;
	}
	.stop,.offline {
		width: 20rpx;
		height: 20rpx;
		margin-right: 16rpx;
		background-image: url(/static/images/icon-stop.png);
		background-repeat:no-repeat;
		background-size:100% 100%; 
	}
	.offline {
		width: 26rpx;
		background-image: url(/static/images/icon-offline.png);
	}
	/* 搜索区域 */
	.search {
		width: 750rpx;
		height: 100rpx;
		padding-left: 40rpx;
		background-color: $color-primary;
		display: flex;
		flex-direction: row;
		align-items: center;
		.doview {
			flex: 1;
			height: 60rpx;
			margin-right: 40rpx;
			border-radius: 30rpx;
			background-color: $color-white;
			display: flex;
			flex-direction: row;
			align-items: center;
			.i {
				width: 29rpx;
				height: 29rpx;
				margin-left: 20rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15lnRqAG9eZAAAEgMBvtvE395.png');
			}
			.int {
				flex: 1;
				margin-left: 15rpx;
				font-size: 24rpx;
			}
			.btn1 {
				width: 80rpx;
				height: 60rpx;
				line-height: 54rpx;
				text-align: center;
				font-size: 24rpx;
				color: $color-grey-dark;
				margin-right: 10rpx;
			}
		}
		.btn2 {
			width: 80rpx;
			height: 60rpx;
			line-height: 54rpx;
			color: $color-white;
		}
	}
	
	/* 筛选区域 */
	.select {
		width: 750rpx;
		height: 82rpx;
		padding: 0 50rpx;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		align-items: center;
		.img {
			width: 136rpx;
			height: 36rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15lpEmAIiFOAAAaGwHUIZU923.png');
		}
		.resi {
			margin-left: 50rpx;
		}
		.resi.std {
			color: $color-primary;
		}
		.stext {
			color: $color-primary;
			
			&.stop {
				background: url('/static/images/icon-stop.png');
			}
		}
	}
	._popup {
		top: 182rpx;
	}
	.status {
		position: fixed;
		top: 182rpx;
		left: 0;
		z-index: $z-index-popup-info;
		width: 750rpx;
		height: 0rpx;
		overflow: hidden;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		align-items: center;
		transition: all 0.3s;
		will-change: height;
		
		&.show {
			height: 120rpx;
		}
		.btn.sl {
			color: #FFFFFF;
			background-color: #407CFF;
			border: 1rpx solid $color-primary;
		} 
		.btn {
			width: 140rpx;
			height: 66rpx;
			margin-left: 30rpx;
			border-radius: 33rpx;
			font-size: 24rpx;
			color: $color-grey-dark;
			background-color: #EEF0F5;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.dian {
				width: 16rpx;
				height: 16rpx;
				margin-right: 16rpx;
				background-color: $color-grey-light;
				border-radius: $border-radius-circle;
			}
			.dian.sd {
				background-color: $color-green;
			}
		}
	}
	
	/* 列表区域 */
	.listview {
		width: 750rpx;
		margin-top: 182rpx;
		padding: 0 10rpx;
	}
	.list-card {
		width: 100%;
		margin-top: $spacing-col;
		.top {
			width: 100%;
			height: 90rpx;
			background: linear-gradient(90deg,rgba(65,125,255,1),rgba(127,168,255,1));
			border-radius: $border-radius-sm $border-radius-sm 0 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			.img {
				width: 125rpx;
				text-align: center;
				.i {
					width: 60rpx;
					height: 60rpx;
					border-radius: $border-radius-circle;
				}
			}
			.name {
				flex: 1;
				color: $color-white;
				margin-right: 30rpx;
			}
			.add {
				width: 58rpx;
				height: 58rpx;
				margin-right: 30rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15lul6AS8A0AAADlJLBxyg064.png');
			}
		}
		.bottom {
			width: 100%;
			padding: 24rpx 0;
			display: flex;
			justify-content: center;
			background-color: $color-white;
			.more {
				font-size: 22rpx;
				color: $color-primary;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.arr {
					width: 17rpx;
					height: 10rpx;
					margin-left: 10rpx;
				}
				.arr.up {
					background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L2WyAVCItAAAMTqsQPF0678.png');
				}
				.arr.down {
					background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L2UKAbaiCAAAMYfR63hE658.png');
				}
			}
		}
		.bottom,
		.mac-list:last-child {
			border-radius: 0 0 $border-radius-sm $border-radius-sm;
		}
	}
	.listview-2 {
		width: 750rpx;
		padding: 0 10rpx;
		margin-top: $spacing-col + 182rpx;
		margin-bottom: 10rpx;
		.list-card-2 {
			width: 100%;
			box-shadow:0px 0px 7px 1px rgba(102,102,102,0.1);
		}
	}
	.mac-list:last-child .info {
		border-bottom: none;
	}
	.mac-list {
		width: 100%;
		height: 110rpx;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		align-items: center;
		.left {
			width: 125rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			$cir-width: 76rpx;
			.pie {
				position: relative;
				width: $cir-width;
				height: $cir-width;
				border-radius: 50%;
				background-color: #D8D8D8;
			}
			.pie-cir {
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: $z-index-public;
				width: $cir-width - 15rpx;
				height: $cir-width - 15rpx;
				line-height: $cir-width - 15rpx;
				text-align: center;
				font-size: 20rpx;
				font-family: $font-family-num;
				border-radius: 50%;
				background-color: $color-white;
				transform: translate(-50%, -50%);
			}
			.pie-left,
			.pie-right {
				width: $cir-width / 2;
				height: $cir-width;
				float: left;
				overflow: hidden;
			}
			.pie-left {
				border-radius: $cir-width 0 0 $cir-width;
			}
			.pie-right {
				border-radius: 0 $cir-width $cir-width 0;
			}
			.pie-left-deg,
			.pie-right-deg {
				width: $cir-width / 2;
				height: $cir-width;
				background-color: #5498FF;
			}
			.pie-left-deg {
				transform-origin: right center;
			}
			.pie-right-deg {
				transform-origin: left center;
			}
		}
		.info {
			flex: 1;
			height: 110rpx;
			margin-right: 40rpx;
			border-bottom: 1rpx solid $color-list;
			display: flex;
			flex-direction: row;
			align-items: center;
			.ic {
				width: 20rpx;
				height: 20rpx;
				margin-left: 5rpx;
				border-radius: $border-radius-circle;
				background-color: $color-grey-light;
			}
			.ic.sl {
				background-color: $color-green;
			}
			.text {
				flex: 1;
				margin-left: 18rpx;
				margin-right: 30rpx;
			}
			.text.di {
				color: $color-grey-light;
			}
		}
	}
	
</style>
